export default {
  props: {
    /**
     * 数据结构：[{id:String, name:String, children:Array}, ...]
     */
    value: Array,
    /**
     * 数据结构：{dataUrl:String, queryParams:Object, casField:String, title:String}
     * dataUrl:查询级联数据的远程接口，每组数据有独立的查询接口；
     * queryParams: 查询级联数据时的参数，每组级联数据来自不同的表，查询条件是不一样的；
     * casField: 级联字段，关联到前一组数据，查询当前组的级联数据时需要以前一组级联数据的选中值作为查询条件，该字段即为条件字段；
     * title: 级联数据独立的标题；
     */
    panel1: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    panel2: {
      type: Object,
      default: () => {
        return {
          dataUrl: '',
          queryParams: {},
          casField: '',
          title: '',
          emptyText: '',
        }
      }
    },
    /**
     * TODO: 是否将两级数据作为树结构返回？即第一级数据为根节点，第二级数据为子节点。
     * 目前默认为 true，即返回树结构数据，用来选岗位，返回：单位/岗位
     */
    treeResult: Boolean,
    multiple: Boolean, // 是否支持多选？只对最后一级生效，前面几级只能单选。
    maxTagCount: Number, // 用于多选的情况，
    height: {
      type: Number,
      default: 400
    },
    width: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      panel1Params: null,
      panel2Params: null, // 查询后台接口时所需的参数。
      selectedRow1: null,
      valueArray: [], // 当前选中的数据，数据个数同value。
    }
  },
  computed: {
    checkedKeys2() { // 当前选中的Panel2数据KEY。
      let keys = []
      if (this.selectedRow1) {
        this.selectedRow1.children.forEach(item => {
          keys.push(item.id)
        })
      }
      return keys;
    },
    checkedCount() {
      let count = 0
      this.valueArray.forEach(item => {
        count += item.children ? item.children.length : 0
      })
      return count
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    value() {
      this.init()
    }
  },
  methods: {
    init() {
      this.initValue()
      this.initPanel1()
      this.initPanel2()
    },
    initValue() {
      this.selectedRow1 = null
      this.valueArray = []
      if (this.value) {
        for (let row of this.value) {
          let newRow = {id: row.id, name: row.name, children: []}
          for (let row2 of row.children) {
            newRow.children.push({id: row2.id, name: row2.name})
          }
          this.valueArray.push(newRow)
        }
      }
    },
    initPanel1() {
      let params = {}
      if (this.panel1.queryParams) {
        for (let key in this.panel1.queryParams) {
          params[key] = this.panel1.queryParams[key]
        }
      }
      this.panel1Params = params
    },
    initPanel2(extParams) {
      let params = {}
      if (this.panel2.casField) {
        params[this.panel2.casField] = '-1'
      }
      if (this.panel2.queryParams) {
        for (let key in this.panel2.queryParams) {
          params[key] = this.panel2.queryParams[key]
        }
      }
      if (extParams) {
        for (let key in extParams) {
          params[key] = extParams[key]
        }
      }
      this.panel2Params = params
    },
    doPanel1NodeClick(data) {
      // 准备刷新Panel2数据
      let casParams = {}
      casParams[this.panel2.casField] = data.id
      this.initPanel2(casParams)
      // 查找已经选中的行
      let row
      this.valueArray.forEach(item => {
        if (item.id === data.id) {
          row = item
        }
      })
      // 存储改变后的值
      if (row) {
        this.selectedRow1 = row
      } else {
        this.selectedRow1 = {
          id: data.id,
          name: data.fullName || data.name,
          children: []
        }
        this.valueArray.push(this.selectedRow1)
      }
    },
    doPanel2NodeClick(data) {
      if (!this.multiple) {
        this._selectPanel2(data)
      }
    },
    doPanel2CheckChange(data, checked) {
      if (!this.multiple) {
        return
      }
      if (checked) {
        this._selectPanel2(data)
      } else {
        this.doRemove(this.selectedRow1.id, data.id)
      }
    },
    _processSingleSelect() {
      this.valueArray.splice(0)
      this.selectedRow1.children.splice(0)
      this.valueArray.push(this.selectedRow1)
    },
    _selectPanel2(data) {
      // 查找已经选中的行
      let row
      this.selectedRow1.children.forEach(item => {
        if (item.id === data.id) {
          row = item
        }
      })
      // 存储改变后的值
      if (!row) {
        row = {
          id: data.id,
          name: data.name
        }
        if (!this.multiple) { // 单选：先清空数组
          this._processSingleSelect()
        } else { // 多选模式下可以即时保存
          this.$emit('onAdd', this.selectedRow1.id, row.id)
        }
        this.selectedRow1.children.push(row)
      }
    },
    doRemove(id1, id2) {
      this.valueArray.forEach(row1 => {
        if (id1 === row1.id) {
          let index = -1
          if (row1.children) {
            row1.children.forEach((row2, idx) => {
              if (id2 == row2.id) {
                index = idx
              }
            })
            if (index >= 0) {
              if (this.multiple) { // 多选模式下可以即时删除
                this.$emit('onRemove', id1, id2)
              }
              row1.children.splice(index, 1)
            }
          }
        }
      })
    },
    doReset () {
      this.init()
    },
    doClear () {
      this.selectedRow1 = null
      this.valueArray = []
    },
    doConfirm() {
      this.$emit('onConfirm', this.valueArray)
    },
    doCancel() {
      this.$emit('onCancel')
    },
  }
}